<template>
  <div>
    <el-dialog width="80%" title="外层 Dialog" :visible="isVisible" @close="changeMyVisible">
      <template>
        <el-button>112</el-button>
        <el-button>112</el-button>
        <el-button>112</el-button>
        <el-button>112</el-button>
        <el-button>112</el-button>
      </template>
      <template>
        <emtable />
      </template>
      <el-dialog
        width="70%"
        title="内层 Dialog"
        :visible.sync="innerVisible"
        append-to-body
      >
        <fd-table />
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FdTable from './FdTable'
export default {
  name: 'FilterDialog',
  components: {
    FdTable
  },
  props: {
    isVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      innerVisible: false,
      myisVisible: this.isVisible
    }
  },
  methods: {
    changeMyVisible() {
      this.$emit('changeMyVisible', false)
    }
  }
}
</script>

<style scoped>

</style>
